<template>
    <el-dialog
            :title="title"
            :visible.sync="localVisible"
            v-on:opened="$emit('opened')"
            v-on:closed="$emit('closed')"
            width="60%"
    >
        <slot></slot>
        <IiFrame ref="iiframe" :url="localUrl" :compute-height="true"></IiFrame>
        <span slot="footer" class="dialog-footer">
    <el-button @click="localVisible = false">取 消</el-button>
    <el-button type="primary" @click="refresh">刷新</el-button>
  </span>
    </el-dialog>
</template>

<script>
    import IiFrame from '../common/IiFrame.vue'
    export default {
        name: "ProcessDiagramDialog",
        components: {
            IiFrame
        },
        props: {
            visible: {
                type: Boolean,
                default: false
            },
            title:{
                type: String,
                default: '内容信息'
            },
            // 流程实例id
            dataModelId: {
                type: String
            },
            dataHistoryModelId: {
                type: String
            },
            // 类型 runtime 详情参见 web/workflow/public/flowable-ext/task/display/displaymodel.js
            dataModelType:{
                type: String,
                required: true
            }
        },
        data() {
            return {
                localVisible: this.visible,
                localUrl: ''
            }
        },
        mounted(){

            this.init()
        },
        methods:{
            show(){
                this.localVisible = true
            },
            hide(){
                this.localVisible = false
            },
            refresh(){
                this.$refs.iiframe.refresh()
            },
            init(){
                let url = '/flowable-ext/task/display/displaymodel.html'
                url += '?data-model-id='
                url += this.dataModelId || ''
                url += '&data-model-type='
                url += this.dataModelType || ''
                url += '&data-history-id='
                url += this.dataHistoryModelId || ''
                this.localUrl = url
            }
        },
        watch:{
            visible(val){
                this.localVisible = val
            },
            dataModelId(){
                this.init()
            },
            dataModelType(){
                this.init()
            }
        }
    }
</script>

<style scoped>

</style>